/* 外层容器样式 */
.tab-container {
  position: relative; /* 使内部元素可以相对于这个容器定位 */
  padding: 20px; /* 内边距 */
}

/* 标签部分样式 */
.tabs {
  display: flex; /* 使用 Flexbox 布局 */
  flex-wrap: wrap; /* 当内容超出容器时换行 */
  gap: 2px; /* 标签之间的间距 */
  justify-content: flex-start; /* 标签对齐方式 */
  position: sticky; /* 吸顶效果 */
  top: 40px; /* 吸顶时距离顶部的距离 */
  z-index: 200; /* 确保标签在其他内容之上 */
  padding: 10px 0; /* 内边距 */
  background-color: #fff;
}

/* 标签按钮样式 */
.tab-button {
  padding: 8px 16px; /* 内边距 */
  margin: 2px; /* 外边距 */
  background-color: transparent; /* 背景色透明 */
  color: #000; /* 文本颜色 */
  border: none; /* 无边框 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
  min-width: 120px; /* 最小宽度 */
  text-align: center; /* 文本居中对齐 */
  font-weight: normal; /* 默认字体粗细 */
  font-size: 14px; /* 字体大小 */
}

/* 激活状态的标签按钮样式 */
.tab-button.active {
  font-weight: 900; /* 粗体字 */
  font-size: 16px; /* 字体大小增加 */
}

/* 展开/收起按钮样式 */
.expand-button {
  position: absolute; /* 绝对定位 */
  top: 0; /* 距离顶部的距离 */
  right: 0; /* 距离右边的距离 */
  padding: 8px 16px; /* 内边距 */
  margin: 2px; /* 外边距 */
  background-color: transparent; /* 背景色透明 */
  color: #ccc; /* 文本颜色 */
  border: none; /* 无边框 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
  font-size: 18px; /* 字体大小 */
}

/* 标签内容区域样式 */
.tab-content {
  display: none; /* 默认隐藏 */
  padding: 10px; /* 内边距 */
  margin-bottom: 10px; /* 下边距 */
  border-radius: 4px; /* 圆角边框 */
  border: none; /* 无边框 */
}

/* 激活状态的标签内容样式 */
.tab-content.active {
  display: block; /* 显示内容 */
}
